<template>
  <!-- <a-alert
    :message="
      '欢迎体验全网首个基于 vue ' +
      dependencies['vue'] +
      ' + ant-design-vue ' +
      dependencies['ant-design-vue'] +
      ' 开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象，感谢尤雨溪、唐金州的开源项目我带来的灵感和帮助，vue-admin-beautiful-antdv同时支持电脑、平板、手机，希望实现一套代码即可帮助中小微企业快速实现项目落地，帮助前端小白快速入门vue前端框架搭建技术，迅速在工作中占据主导地位。'
    "
    type="success"
    show-icon
  /> -->
  <a-row>
    <a-col :span="12">
      <a-card class="version-information">
        <template v-slot:title>个人信息</template>
        <div class="version-information-table">
          <table>
            <tr>
              <td>个人姓名</td>
              <td>{{ userInfo.userName }}</td>
            </tr>
            <tr>
              <td>邮箱</td>
              <td>{{ userInfo.email }}</td>
            </tr>
            <tr>
              <td>手机号</td>
              <td>{{ userInfo.phoneNumber }}</td>
            </tr>
            <tr>
              <td>性别</td>
              <td>男</td>
            </tr>
            <tr>
              <td>生日</td>
              <td>{{ userInfo.birthday }}</td>
            </tr>
            <tr>
              <td>创建时间</td>
              <td>{{ userInfo.created }}</td>
            </tr>
            <tr>
              <td>最后登录时间</td>
              <td>{{ userInfo.lastLogin }}</td>
            </tr>
            <tr>
              <td>职位</td>
              <td>管理员</td>
            </tr>
          </table>
        </div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card class="version-information">
        <template v-slot:title>系统信息</template>
        <template v-slot:extra>
          <a href="#">部署时间{{ updateTime }}</a>
        </template>
        <div class="version-information-table">
          <table>
            <tr>
              <td>vue</td>
              <td>{{ dependencies['vue'] }}</td>
            </tr>
            <tr>
              <td>@vue/cli</td>
              <td>{{ devDependencies['@vue/cli-service'] }}</td>
            </tr>
            <tr>
              <td>vuex</td>
              <td>{{ dependencies['vuex'] }}</td>
            </tr>
            <tr>
              <td>vue-router</td>
              <td>{{ dependencies['vue-router'] }}</td>
            </tr>
            <tr>
              <td>eslint-plugin-vue</td>
              <td>{{ devDependencies['eslint-plugin-vue'] }}</td>
            </tr>
            <tr>
              <td>axios</td>
              <td>{{ dependencies['axios'] }}</td>
            </tr>
            <tr>
              <td>babel-eslint</td>
              <td>{{ devDependencies['babel-eslint'] }}</td>
            </tr>
            <tr>
              <td>ant-design-vue</td>
              <td>{{ dependencies['ant-design-vue'] }}</td>
            </tr>
          </table>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { dependencies, devDependencies } from '*/package.json'
  import { userInfo } from '@/api/httpapi'
  export default {
    data() {
      return {
        updateTime: process.env.VUE_APP_UPDATE_TIME,
        dependencies: dependencies,
        devDependencies: devDependencies,
        userInfo: {},
      }
    },
    mounted() {
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        const _this = this
        userInfo({
          username: localStorage.getItem('username'),
        }).then(function (res) {
          console.log(res.data)
          _this.userInfo = res.data
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .version-information {
    margin-top: @vab-margin;
    margin-right: 10px;
    margin-left: 10px;
    height: 440px;
    &-table {
      width: 100%;
      overflow: scroll;
      table {
        width: 100%;
        color: #666;
        border-collapse: collapse;
        background-color: #fff;

        td {
          position: relative;
          padding: 9px 15px;
          font-size: 14px;
          line-height: 20px;
          border: 1px solid #e6e6e6;

          &:nth-child(odd) {
            width: 30%;
            text-align: right;
            background-color: #f7f7f7;
          }
        }
      }
    }
  }
</style>
